import { useFindRelGoods } from "@/apis/product";
import "./index.scss";
import { useEffect, useState } from "react";
import XtxCarousel from "@/components/library/xtxCarousel";
function GoodsRelevant({ goodsId }: { goodsId: string }) {
  const { result }: any = useFindRelGoods(goodsId, 16);
  const [goodsList, setGoodsList] = useState<any[]>([]);
  useEffect(() => {
    if (result?.length) {
      const size = 4;
      const arr: any[] = [];
      const total = Math.ceil(result.length / size);
      for (let i = 0; i < total; i++) {
        arr.push(result.slice(i * size, (i + 1) * size));
        setGoodsList(arr);
      }
    }
  }, [result]);
  return (
    <>
      {goodsList && (
        <div className="goods-relevant">
          <div className="header">
            <i className="icon" />
            <span className="title">
              {goodsId ? "同类商品推荐" : "猜你喜欢"}
            </span>
          </div>
          <XtxCarousel carouselList={goodsList} style={{ height: "380px" }} />
        </div>
      )}
    </>
  );
}
export default GoodsRelevant;
